<template>
  <div class="#app">
    <el-card>
      <!-- 2.1 顶部操作 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 使用clearable属性即可得到一个可清空的输入框   clear	在点击由 clearable 属性生成的清空按钮时触发-->
          <el-input placeholder="请输入内容" v-model="queryInfo.name" class="input-with-select"
                    clearable @clear="getList">
            <template #append>
              <el-button icon="el-icon-search" @click="getList"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <!--          <el-button type="primary" @click="showAddDialog">添加</el-button>-->
          <!--          <el-button type="primary" @click="deleteBlogs(multipleSelection)">批量删除</el-button>-->
        </el-col>
      </el-row>

      <el-table :data="fromData" border stripe
                @selection-change="handleSelectionChange"
      >
        <!-- 索引列 -->
        <!--        <el-table-column type="selection" width="55"></el-table-column>-->
        <!--        <el-table-column label="入住单号" prop="checkinId" ></el-table-column>-->
        <el-table-column label="客房编号" prop="roomId"></el-table-column>
        <el-table-column label="客房类型" prop="roomType"></el-table-column>
        <el-table-column label="入住人" prop="name"></el-table-column>
        <el-table-column label="会员编号" prop="memberId"></el-table-column>
        <el-table-column label="付款金额" prop="incomingAmount"></el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">结账
            </el-button>
            <!--            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeById(scope.row.id)">删除
                        </el-button>-->
            <!-- {{scope.row}} -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 2.3 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize" :page-sizes="[5, 10, 20, 40]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 3.弹框区域 -->

    <!-- 添加框 -->
    <!-- modify -->
    <!--    <el-dialog title="添加" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
          <el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="100px">
            <el-form-item label="字典名称" prop="name ">
              <el-input v-model="addForm.name"></el-input>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="addForm.remark"></el-input>
            </el-form-item>
          </el-form>
          &lt;!&ndash; 底部 &ndash;&gt;
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>-->
    <!-- 编辑框 modif -->
    <el-dialog title="确认订单" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" ref="editFormRef" :rules="editFormRules" label-width="100px">
        <el-form-item label="入住单号" prop="checkinId">
          <el-input v-model="editForm.checkinId" disabled></el-input>
        </el-form-item>
        <el-form-item label="客房编号" prop="roomId">
          <el-input v-model="editForm.roomId" disabled></el-input>
        </el-form-item>
        <el-form-item label="客房类型" prop="roomType">
          <el-input v-model="editForm.roomType" disabled></el-input>
        </el-form-item>
        <el-form-item label="入住人" prop="name">
          <el-input v-model="editForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="会员编号" prop="memberId">
          <el-input v-model="editForm.memberId" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款金额" prop="incomingAmount">
          <el-input v-model="editForm.incomingAmount" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款方式" prop="payType">
          <el-select v-model="editForm.payType" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import {getAllUncheckOut, addFinancialBill} from "../../api/checkout_management";

export default {
  name: "CheckoutManagement",
  data() {
    return {
      queryInfo: {
        name: "",
        currentPage: 1,
        size: 10,
      },
      editDialogVisible: false,
      total: 0,
      fromData: [],
      editForm: {
        checkinId: '',
        roomId: '',
        roomType: '',
        name: '',
        memberId: '',
        incomingAmount: 0.0,
        payType: '微信'
      },
      // modify
      editFormRules: {
        payType: [
          {required: true, message: "请选择付款方式", trigger: "blur"}
        ]
      },
      options: [{
        value: '微信',
        label: '微信'
      }, {
        value: '支付宝',
        label: '支付宝'
      }, {
        value: '现金',
        label: '现金'
      }
      ]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getAllUncheckOut(this.queryInfo).then(res => {
        console.log(res.data.data);
        this.total = res.data.total;
        this.fromData = res.data.data;
      })
    },

    editDialogClosed() {
      this.editDialogVisible = false;
    },
    showEditDialog(data) {
      this.editForm = data;
      this.editForm.payType = "微信"
      this.editDialogVisible = true;
    },

    update() {
      console.log(this.editForm);
      addFinancialBill(this.editForm).then(res => {
        if (res.status === 200) {
          this.$notify({
            title: '成功',
            message: '结账成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '错误',
            message: res.msg,
            type: 'error'
          });
        }
        this.editDialogVisible = false;
        this.getList();
      })
    }
  }
}
</script>

<style scoped>

</style>